<template>
  <div class="group-wrapper">
    <navHeader title="精品团购" englishTitle="Boutique Group Buying"></navHeader>
    <div class="cloth-img">
      <swiper :options="swiperOption" ref="mySwipers"  class="my-swiper">
        <swiper-slide v-for="(item, index) in imgs" :key="index">
          <div class="left-wrapper">
            <img class="first-img" :src="item[0]['url']" alt="">
            <div class="cloth-name">{{item[0]['title']}}</div>
            <div class="price">
              <div class="new-price">￥{{item[0]['price']}}</div>
              <div class="old-price">￥{{item[0]['oldPrice']}}</div>
            </div>
          </div>
          <div class="right-wrapper">
            <div class="cloth-name">{{item[1]['title']}}</div>
            <div class="price">
              <div class="new-price">￥{{item[1]['price']}}</div>
              <div class="old-price">￥{{item[1]['oldPrice']}}</div>
            </div>
            <div class="good-price">
              <img class="second-img" :src="item[1]['url']" alt="">
            </div>
          </div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script>
/**
* descripe: 精品团购
* date: 2019-06-28
* author: yezhanxiang
*/
import navHeader from './nav-header';
  export default {
    data () {
      return {
        swiperOption: {
          notNextTick: true,
          speed:1000
        },
        imgs: [
        [{
            title: '古黛妃 短袖t恤女夏装2019新款韩版宽松',
            url: require("../assets/static/temp/show1.jpg"),
            price: 456,
            oldPrice: 789
          }, {
            title: '潘歌针织连衣裙',
            url: require("../assets/static/temp/show2.jpg"),
            price: 354,
            oldPrice: 789
          }
        ], [
          {
            title: '巧谷2019春夏季新品新款女装',
            url: require("../assets/static/temp/show3.jpg"),
            price: 645,
            oldPrice: 789
          }, {
            title: '私萱连衣裙',
            url: require("../assets/static/temp/show4.jpg"),
            price: 995,
            oldPrice: 789
          }
        ], [
          {
            title: '原宿风学生潮韩版春夏短',
            url: require("../assets/static/temp/show5.jpg"),
            price: 753,
            oldPrice: 789
          }, {
            title: '古黛妃 短袖t恤女夏装2019新款韩版宽松',
            url: require("../assets/static/temp/show1.jpg"),
            price: 456,
            oldPrice: 789
          },]
        ]
      }
    },
    components: {
      navHeader
    },
    watch: {

    },
    computed: {
      swiper () {
        return this.$refs.mySwipers.swiper
      }
    },
    created () {

    },
    methods: {
    }
  }
</script >

<style lang='stylus' scoped>
.group-wrapper
  height 7rem
  background-color #fff
  margin-top .2rem
  padding 0 0.2rem
  display flex
  flex-direction column
  .cloth-img
    .my-swiper
      width 100%
      height 100%
      .swiper-wrapper
        .swiper-slide
          display flex
          .left-wrapper
            width 56%
            padding 0
            margin-right 0.25rem
            img 
              width 100%
              height 4.6rem
            .cloth-name
              width 100%
              overflow hidden
              white-space nowrap
              text-overflow ellipsis
              font-size: 0.3rem;
              text-align left
              color: #303133;
              line-height: 0.4rem;
            .price
              display flex
              line-height: 0.48rem;
              .new-price
                color: #fa436a
                font-size: .3rem
              .old-price
                font-size: .2rem;
                text-decoration: line-through;
                color: #909399;
                align-self: flex-end;
                margin-left 0.1rem
          .right-wrapper
            width 44%
            .cloth-name
              width 100%
              overflow hidden
              white-space nowrap
              text-overflow ellipsis
              font-size: 0.3rem;
              text-align left
              color: #303133;
              line-height: 0.4rem;
            .price
              display flex
              line-height: 0.48rem;
              .new-price
                color: #fa436a
                font-size: .3rem
              .old-price
                font-size: .2rem;
                text-decoration: line-through;
                color: #909399;
                align-self: flex-end;
                margin-left 0.1rem
            .good-price
              position: relative;
              overflow: hidden;
              height: 4.7rem;
              width: 100%;
              .second-img
                position: absolute;
                left: 50%;
                width: auto;
                margin: auto;
                top: 50%;
                transform: translate(-50%, -50%);
                max-height: 4.8rem;
</style>
